<template>
    <div class="floatwin">
        <p class="header_detail">悬浮窗</p>
        <div  class="detail_content">
            <p class="detail_title">选择启用的悬浮内容</p>
            <ul class="float_list">
                <li v-for='(item,index) in list' :key='index'>
                    <el-checkbox v-model="list[index].checked" @change='changeList(index)'>{{list[index].title}}</el-checkbox>
                    <div class="imgDetail">
                        <img :src="iconList[index].icon" alt="">
                        <div class="inputDetail">
                            <p class="event_title">事件ID（选填）</p>
                            <el-input  @change='toParent'  v-model='list[index].event' :disabled="list[index].eventChecked || !item.checked" placeholder="请输入埋点链接"></el-input>
                        </div>
                    </div>
                    <!-- <div class="uploadImg" @click='getIndex(index)'>
                        <el-upload
                            class="avatar-uploader"
                            action='#'
                            :auto-upload="false"
                            :show-file-list="false"
                            :on-change='getImg'
                            :on-remove="handleRemove"
                            :http-request="uploadImg"
                        >
                            <img v-if="list[index].imageUrl" :src="list[index].imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div> -->
                    <!-- <p>图标限制xx * xx像素</p> -->
                </li>
            </ul>
        </div>
        <!-- <div  class="eventBus" v-for='(item,index) in list' :key='index' >
            <p class="event_title" v-if='item.checked'>事件（选填）</p>
            <el-input v-if='item.checked' @change='toParent'  v-model='list[index].event' :disabled="data.eventChecked" :placeholder="`请输入${item.title}时间ID`"></el-input>
        </div> -->
      
    </div>
</template>

<script>
export default {
    data(){
        return {
            data:{
                
            },
            iconList:[
                {icon:require('@/assets/img/editContent/floating-icon-gift.png')},
                {icon:require('@/assets/img/editContent/floating-icon-service.png')},
                 {icon:require('@/assets/img/editContent/floating-icon-reserve.png')},
                {icon:require('@/assets/img/editContent/floating-icon-top.png')}
            ],
            list:[{type:1,title:'新人礼',checked:true},{type:2,title:'在线客服',checked:true},{type:3,title:'预约有礼',checked:true}],
            activeUploadIndex:0
        }
    },
    props:{
        propData:{
            type:Object
        }
    },
    methods:{
         // 获取当前点击的upload
        getIndex(index){
            if(this.activeUploadIndex ==index){
                return;
            }
            this.activeUploadIndex = index;
        },
        uploadImg(){

        },
        handleRemove(){

        },
        getImg(val){
            let that = this;
            let file = val.raw;
            var reader = new FileReader();
            reader.readAsDataURL(file);
            reader.onload =(e)=>{ 
                that.list[that.activeUploadIndex].imageUrl=e.target.result;
                that.toParent();
            }
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        changeList(index){
            this.list.map((val,index)=>{
                if(!val.checked){
                    this.list[index].event = '';
                }
            })
            let val = this.list.find(el=>el.checked==true)
            if(val){
                this.toParent()
            }else{
                this.list[index].checked = true;
            }
        },
        toParent(){
            var checkList = [];
            this.list.map((val,index)=>{
                if(val.checked){
                    checkList.push(val.type);
                }
            })
            let data = {
                ...this.data,
                list:this.list,
                checkList:checkList
            }
            this.$emit('toParent',data)
        }
    },
    watch:{
        propData:function(val){
            this.data = JSON.parse(JSON.stringify(this.propData)); 
            let arr = [];
            this.data.list.map((val,index)=>{
                let obj = val;
                // if(val.event){
                //     obj.eventChecked = true;
                // }
                arr.push(obj);
            })
            this.list = JSON.parse(JSON.stringify(arr));
            // this.list = this.data.list||[{type:1,title:'在线客服'},{type:2,title:'预约'},{type:3,title:'新人礼'},{type:4,title:'返回顶部'}];
        }
    },
    mounted(){
        this.data = JSON.parse(JSON.stringify(this.propData)); 
        // debugger;
        let arr = [];
        this.data.list.map((val,index)=>{
            let obj = val;
            // if(val.event){
            //     obj.eventChecked = true;
            // }
            arr.push(obj);
        })
        this.list = JSON.parse(JSON.stringify(arr));
        this.toParent();
        console.log(this.propData,'接收到的参数')
        // debugger;
    }    
}
</script>
<style lang="less" scoped>
    .floatwin{
        width:100%;
        .header_detail{
            height:50px;
            line-height:50px;
            border-bottom:1px solid #E4E4E4;
            font-size: 16px;
            color: #000000;
            padding-left:16px;
        }
        .detail_content{
            .detail_title{
                line-height:46px;
                color:#666666;
                font-size: 14px;
                padding-left:16px;
                box-sizing: border-box;
            } 
        }
        .float_list{
            width:100%;
            height:auto;
            // padding: 0 20px;
            box-sizing: border-box;
            font-size: 12px;
            li{
                width:100%;
                margin-top: 2px;
                background: #F7F7F7;
                padding:10px;
                box-sizing: border-box;
                .imgDetail{
                    display:flex;
                    justify-content: space-between;
                    align-items: center;
                    width:100%;
                    height:76px;
                    .inputDetail{
                        line-height:30px;
                        width:calc(100% - 76px);
                        height:76px;
                    }
                }
                .el-checkbox{
                    display:inline-block;
                    width:80px;
                }
            }
        }
        .uploadImg{
            /deep/ .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
             /deep/ .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
             /deep/.avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 100px;
                height: 100px;
                line-height: 100px;
                text-align: center;
            }
             /deep/.avatar {
                width: 100px;
                height: 100px;
                display: block;
            }
        }
    }
    /deep/.el-slider__bar{
        background-color:#FF8244;
    }
    /deep/.el-slider__button{
        border: 2px solid #FF8244;
    }
    .eventBus{
        font-size: 14px;
        padding:5px 16px 0 16px;
        .event_title{
           margin-bottom:10px;
        }
    }
</style>